import React, { Component, createRef } from 'react';

import {RechargeStyled} from './RechargeStyled'
import { Toast } from 'antd-mobile'

import Navigation from 'components/Navigation/Navigation'
import back from 'images/nav/whiteback@3x.png'
import weixin from 'images/my/weixin@3x.png'
import zhifubao from 'images/my/zhifubao@3x.png'

import Button from 'components/UIButton/UIButton'
import Splashscreen from 'components/Splashscreen/Splashscreen'

import img from 'images/home/message/m_pic1@2x.png'
import czcg from 'images/hall/czcg@3x.png'



let i=0;
class Recharge extends Component {
  constructor() {
    super()
    this.username = createRef()
    this.state = {
      inputMoney : '',
    }
  }
  
  keyDown=(e)=>{
    console.log(e)
    console.log(e.keyCode)
    console.log(this.username.current.value)

    if(e.keyCode == 69){
      console.log(1)
      return false
    }
  }
  keyPress=(e)=>{
    console.log(e)
    console.log(e.keyCode)
  }
  changeInputValue = (e) => {
    // console.log(11)
    // console.log(this.username.current.value)
    this.setState({
      inputMoney: e.target.value
    })
  }
  
  onClickLeft(tag){
    this.props.history.go(-1)

  }

  onClickCancel(){
    this.props.history.go(-2)

  }

  handleClick = () => {
    console.log(this.username.current.value)
  }


  onClickPay(tag){
    console.log(this.state.inputMoney)
    if(tag==='wx'){
      Toast.info('微信充值',0.5)
      this.tag.show({
        title:'充值成功',
        img:czcg,
        infomation: '2小时内到账，请耐心等待',
        // notAutoHidden: true,
        showTime: 1000,
      })

   
    }else if(tag==='zfb'){
      Toast.info('支付宝充值',0.5)
      i++
      
    }
  }


  refTag = (ref)=>{
    // 传递给子组件，用于确定目标子组件，使用将子组件作为父组件的tag属性值，使用tag调用子组件的方法
    this.tag = ref
  }
  didHiddenView = (msg)=>{
    console.log(msg)
  }


  render() {
    return (
      <RechargeStyled>
        
        {/* */}
        <Navigation
        title = "充值 "
        leftMargin = '0 0 0 .15rem'
        leftWidth = '25%'
        leftHeight = '.44rem'
        leftImg = {back}
        leftImgWidth = '.2rem'
        clickLeft = {()=>this.onClickLeft("left")}
        ></Navigation>

        <div className="wrap">
          <div className='inputMoneyView'>
            <p className="ptit">账号充值</p>
            <p className="ptip">充值金额</p>
            <div className='input'>
              <span className='moneybz'>￥</span>
              <input type="number" placeholder="请输入充值金额（10元起充）"  
              value = {this.state.inputMoney}
              onChange={this.changeInputValue} 
              // defaultValue="3333" ref={this.username} 
              // onClick={this.handleClick} 
              // onKeyPress={this.keyPress}
              // onKeyDown={this.keyDown} 
              />
            </div>
            <div className='payType'>
              <Button
              img={weixin}
              width='.6rem'
              clickButton = {()=>this.onClickPay('wx')}

              ></Button>
              <Button
              img={zhifubao}
              width='.6rem'
              clickButton = {()=>this.onClickPay('zfb')}

              ></Button>
            </div>
          </div>

        </div>
        <div className='btnWrap'>
        <Button
        title='取消'
        margin="1.34rem 0 .25rem"
        width="100%"
        height=".34rem"
        borderRadius='.17rem'
        backgroundColor='#56D9D1'
        titleColor='#0E0E0E'
        titleSize = '.15rem'
        clickButton = {()=>this.onClickCancel()}
        ></Button>
        </div>
        <p className='tip'>24小时内到账，请耐心等待。</p>

        <Splashscreen tagRef={this.refTag}
          // width= '100%'
          // height= '100%'
          // notShowNavBar= {false}
          // backgroundColor= 'rgba(0,0,0,.5)'
    
          // wrapWidth= '50%'
          // wrapHeight= '50%'
          // wrapBackgroundColor= '#fff'
          // wrapBorder='1px solid #000'
          // wrapBorderRadius= '.1rem'
        
          imgWidth='50%'
          // imgHeight= 'auto'
          // imgBackgroundColor= '#fff'
          // imgRadius='.1rem'
          imgMargin='0 0 .64rem 0'
    
          // titleWidth='2rem'
          // titleHeight= '.22rem'
          // titleSize='.15rem'
          // titleColor='#0E0E0E'
          // titleRadius='.05rem'
          // titleBackgroundColor='red'
          titleMargin='0 0 1rem 0'
    
          // infoWidth='2rem'
          // infoHeight= '.15rem'
          // infoSize='.11rem'
          // infoColor='#C0C0C0'
          // infoRadius='.05rem'
          // infoMargin='0'
          // infoBackgroundColor='#0f0'

          didHiddenView={this.didHiddenView}

        ></Splashscreen>
      </RechargeStyled>
    );
  }
}

export default Recharge;